<template>
	<view v-if="hasResult">
		<view class="content">
			<view class="page-header">
				<img class="page-header-img" src="@/static/images/synthesis/result/result_1.png" alt="八字">
			</view>
			<view class="userinfo-box">
				<view class="user-info">
					<view class="user-info-base">姓名：<span class="red">{{name}}</span></view>
					<view class="user-info-base">性别：<span class="red">{{sex}}</span></view>
					<view class="user-info-base">生肖：<span class="red">{{zodiac}}</span></view>
				</view>
				<view class="user-date">
					<view>农历：<span class="red">{{lunarDate}}</span></view>
					<view>阳历：<span class="red">{{solarDate}}</span></view>
					<view>地区：<span class="red">{{area}}</span></view>
					<view v-if="hasSolarTime==true">真太阳时：<span class="red">{{solartime}}</span></view>
				</view>
				<view class="user-bazi">
					<view>您的五行八字资料</view>
					<view class="ganzhi-table">
						<view class="ganzhi-item">
							<view class="ganzhi-total-title first-col">八字</view>
							<view class="ganzhi-total-content" v-for="(item, index) in shizhu" :key="index">{{item}}</view>
						</view>
						<view class="ganzhi-item">
							<view class="ganzhi-title first-col">天干</view>
							<view class="ganzhi-content" v-for="(item, index) in tianganIndex" :key="index">
								<view>{{bazi[item]}}</view>
							</view>
						</view>
						<view class="ganzhi-item">
							<view class="ganzhi-title first-col">地支</view>
							<view class="ganzhi-content" v-for="(item, index) in dizhiIndex" :key="index">
								<view>{{bazi[item]}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="user-des"></view>
			</view>
			<view class="bazi-info">
				<view class="bazi-info-title">
					<img class="bazi-img-title" src="@/static/images/synthesis/result/pic-text4.png" alt="命盘图解">
				</view>
				<view class="bazi-info-content">
					<view class="bazi-info-section-title">
						<img class="bazi-section-img-title" src="@/static/images/synthesis/result/bzpp.png" alt="八字排盘">
					</view>
					<view class="bazi-tips">
						<span class="red">提示：</span>
						<span>八字命盘从阴阳干支三合历取得。上排是天干，由五行「金水木火土」轮流排列。下排是地支，用十二生肖顺序排列。十二生肖可转换成五行。</span>
					</view>
					<view class="bizipaipan-info">
						<view class="ganzhi-table">
							<view class="ganzhi-item">
								<view class="ganzhi-total-title first-col">八字</view>
								<view class="ganzhi-total-content" v-for="(item, index) in shizhu" :key="index">{{item}}</view>
							</view>
							<view class="ganzhi-item">
								<view class="ganzhi-title first-col">天干</view>
								<view class="ganzhi-content" v-for="(item, index) in tianganIndex" :key="index">
									<view>{{bazi[item]}}</view>
								</view>
							</view>
							<view class="ganzhi-item">
								<view class="ganzhi-title first-col">地支</view>
								<view class="ganzhi-content" v-for="(item, index) in dizhiIndex" :key="index">
									<view>{{bazi[item]}}</view>
								</view>
							</view>
							<view class="ganzhi-item">
								<view class="ganzhi-title first-col">十神</view>
								<view class="ganzhi-content" v-for="(item, index) in shIndex" :key="index">
									<view>{{sh[item]}}</view>
								</view>
							</view>
							<view class="ganzhi-item">
								<view class="ganzhi-title first-col">藏干</view>
								<view class="ganzhi-content" v-for="(item, index) in cgIndex" :key="index">
									<view>{{cg[item]}}</view>
								</view>
							</view>
							<view class="ganzhi-item">
								<view class="ganzhi-title first-col cgsh-item">藏干<br>十神</view>
								<view class="ganzhi-content cgsh-item" v-for="(item, index) in cgshIndex" :key="index">
									<view v-html="cgsh[item]"></view>
								</view>
							</view>
							<view class="ganzhi-item">
								<view class="ganzhi-title first-col">命宫</view>
								<view class="ganzhi-content-merge">
									<view>{{minggong}}</view>
								</view>
							</view>
							<view class="ganzhi-item">
								<view class="ganzhi-title first-col">胎元</view>
								<view class="ganzhi-content-merge">
									<view>{{taiyuan}}</view>
								</view>
							</view>
							<view class="ganzhi-item">
								<view class="ganzhi-title first-col">胎息</view>
								<view class="ganzhi-content-merge">
									<view>{{taixi}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bazi-info-section-title">
						<img class="bazi-section-img-title" src="@/static/images/synthesis/result/wxzs.png" alt="五行综述">
					</view>
					<view class="ganzhi-table">
						<view class="ganzhi-item">
							<view class="ganzhi-total-title first-col">八字</view>
							<view class="ganzhi-total-content" v-for="(item, index) in shizhu" :key="index">{{item}}</view>
						</view>
						<view class="ganzhi-item">
							<view class="ganzhi-title first-col">五行</view>
							<view class="ganzhi-content" v-for="(item, index) in wx" :key="index">
								<view>{{item}}</view>
							</view>
						</view>
					</view>
					<!-- <img class="ad-img" src="@/static/images/synthesis/result/ad_1.png" @click="adTarget"> -->
				</view>
			</view>
			<view class="bazi-info">
				<view class="bazi-info-title">
					<img class="bazi-img-title" src="@/static/images/synthesis/result/pic-text2.png" alt="八字详批">
				</view>
				<view class="bazi-des-box">
					<view class="bazi-des-title">
						<img class="bazi-des-title-img" src="@/static/images/synthesis/result/xgfx.png" alt="性格分析">
					</view>
					<view class="bazi-des-content">
						<p v-html="xgfx"></p>
					</view>
				</view>
				<view class="bazi-des-box">
					<view class="bazi-des-title">
						<img class="bazi-des-title-img" src="@/static/images/synthesis/result/aqfx.png" alt="爱情分析">
					</view>
					<view class="bazi-des-content">
						<p>{{`您命中有:红艳桃花${aqnum}朵`}}</p>
          	<p v-html="aqfx"></p>
					</view>
				</view>
				<view class="bazi-des-box">
					<view class="bazi-des-title">
						<img class="bazi-des-title-img" src="@/static/images/synthesis/result/syfx.png" alt="事业分析">
					</view>
					<view class="bazi-des-content" >
						<p v-html="syfx"></p>
						<p v-html="syfxPlus"></p>
					</view>
				</view>
				<!-- <img class="ad-img" src="@/static/images/synthesis/result/ad_1.png" @click="adTarget"> -->
				<view class="bazi-des-box">
					<view class="bazi-des-title">
						<img class="bazi-des-title-img" src="@/static/images/synthesis/result/jkfx.png" alt="健康分析">
					</view>
					<view class="bazi-des-content">
						<p v-html="jkfx.des"></p>
						<p>易患疾病:<span v-html="jkfx.jb"></span></p>
						<p>易发症状:<span v-html="jkfx.zz"></span></p>
						<p>从中医养生上来说，您基本上是<font color="#ff4632">{{jkfx.wh}}</font>型人。</p>
						<p>养生要点:<span v-html="jkfx.yd"></span></p>
						<p>生活起居:<span v-html="jkfx.sh"></span></p>
						<p>饮食调养:<span v-html="jkfx.ys"></span></p>
						<p>保健膳食:<span v-html="jkfx.bj"></span></p>
					</view>
				</view>
				<view class="bazi-des-box">
					<view class="bazi-des-title">
						<img class="bazi-des-title-img" src="@/static/images/synthesis/result/cyfx.png" alt="财运分析">
					</view>
					<view class="bazi-des-content">
						<p v-html="cyfx"></p>
					</view>
				</view>
				<view class="bazi-des-box">
					<view class="bazi-des-title">
						<img class="bazi-des-title-img" src="@/static/images/synthesis/result/smth.png" alt="三命通会">
					</view>
					<view class="bazi-des-content">
						<p v-html="smth"></p>
						<p v-html="smthPlus"></p>
					</view>
				</view>
				<!-- <img class="ad-img" src="@/static/images/synthesis/result/ad_1.png" @click="adTarget"> -->
				<view class="bazi-des-box">
					<view class="bazi-des-title">
						<img class="bazi-des-title-img" src="@/static/images/synthesis/result/wlyn.png" alt="未来一年">
					</view>
					<view class="bazi-des-content">
						<p v-html="wlyn"></p>
					</view>
				</view>
			</view>
		</view>
		<!-- <img class="ad-img bottom-ad" src="@/static/images/synthesis/result/ad_2.png" @click="adTarget"> -->
		<!-- 咨询弹窗 -->
<!-- 		<uni-popup ref="codePopup" type="center" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
			<div class="master-hit-box">
				<div class="master-hit-close" @click="masterHitClose">
					X
				</div>
				<img class="master-hit-img" src="@/static/images/synthesis/result/add-teacher-bg.png">
        <div class="master-wxcode">
          <div class="master-wxcode-box">
              <img class="master-wxcode-img-box" src="@/static/images/synthesis/result/add-teacher-code.png">
              <img class="master-wxcode-img" src="@/static/images/synthesis/result/code.png">
          </div>
        </div>
        <div class="master-tips-box">
          <img class="master-tips" src="@/static/images/synthesis/result/add-teacher-tips.png">
        </div>
        <div class="master-tips2-box">
          <img class="master-tips2" src="@/static/images/synthesis/result/add-teacher-tips2.png">
        </div>
			</div>
		</uni-popup> -->
		<!-- 确认弹窗 -->
<!-- 		<uni-popup ref="confirmPopup" type="center" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.8)">
			<div class="login-hit-box">
				<img class="login-hit-img" src="@/static/images/synthesis/result/again-bg.png">
				<view class="login-hit-btn" @click="againHitOpen">
					<img class="login-hit-btn-img" src="@/static/images/synthesis/result/again-confirm.png">
				</view>
				<view class="login-hit-btn" @click="againHitClose">
					<img class="login-hit-btn-img" src="@/static/images/synthesis/result/again-cancel.png">
				</view>
			</div>
		</uni-popup> -->
	</view>
</template>

<script>
	// 日历工具
	export default {
    name: 'result',
    props: {
      userInfo: {},
      result: {}
    },
		data() {
			return {
        current: 0,
				hasResult: false,
        name: '',
        sex: '',
				hasSolarTime: false,
				solartime: '',
				area: '',
        zodiac: '',
        solarDate: '',
        lunarDate: '',
				// 时柱
        shizhu: ['年柱', '月柱', '日柱', '时柱'],
				tianganIndex: [ 'tyear', 'tmonth', 'tday', 'thour'],
				dizhiIndex: [ 'zyear', 'zmonth', 'zday', 'zhour'],
				// 八字
        bazi: [],
				// 十神
				sh: [],
				shIndex: [ "shyear", "shmonth", "shday", "shhour"],
				// 藏干
				cg: [],
				cgIndex: [ 'cgyear', 'cgmonth','cgday', 'cghour'],
				// 藏干十神
				cgsh: [],
				cgshIndex: [ "cgshyear", "cgshmonth", "cgshday", "cashhour"],
				minggong: '',
				taiyuan: '',
				taixi: '',
				// 五行综述
				wx: [],
				wxIndex: [],
				// 综合
				zonghe: {},
				// 性格分析
				xgfx: '',
				// 爱情分析
				aqfx: '',
				aqnum: '',
				// 事业分析
				syfx: '',
				syfxPlus: '',
				// 健康分析
				jkfx: '',
				// 财运分析
				cyfx: '',
				// 三命通会
				smth: '',
				smthPlus: '',
				// 未来一年
        wlyn: ''
			}
		},
    mounted() {
      this.load();
    },
		methods: {
			adTarget() {
				this.$refs.codePopup.open();
			},
			masterHitClose() {
				this.$refs.codePopup.close();
				this.$refs.confirmPopup.open();
			},
			againHitOpen() {
				this.$refs.confirmPopup.close();
				this.$refs.codePopup.open();
			},
			againHitClose() {
				this.$refs.confirmPopup.close();
			},
      load() {
        uni.showLoading({
        	title: '加载中'
        });
        if (this.result && this.userInfo){
          
          this.name = this.userInfo.username;
          this.sex = this.userInfo.sex == '0' ? '男' : '女';

          if (this.userInfo.solarTime) {
            this.hasSolarTime = true;
            let solarTimeArr = this.userInfo.solarTime.split(" ");
            let solarDate = solarTimeArr[0];
            let solarDateArr = solarDate.split("-");
            this.solartime = solarDateArr[0] + '年' + solarDateArr[1] + '月' + solarDateArr[2] +  '日' + ' ' + solarTimeArr[1];
          }else{
            this.hasSolarTime = false;
          }
          this.area = this.userInfo.area || '未知';

          this.zodiac = this.result.animal;
          let timeArr = this.userInfo.birthday.split(" ");
          let date = timeArr[0]
          let dateArr = date.split("-");;
          let hour = timeArr[1];
          this.solarDate = dateArr[0] + '年' + dateArr[1] + '月' + dateArr[2] +  '日' + ' ' + hour;
          this.lunarDate = this.result.lunarstring;
          // 八字天干地支
          this.bazi = this.result.bazi;
          // 十神
          this.sh = this.result.sh;
          // 藏干
          let cgTemp = this.result.cg
          for (let ele in cgTemp) {
            cgTemp[ele] = cgTemp[ele].replace(/,/g, '')
          }
          this.cg = cgTemp;
          // 藏干十神
          let cgshTemp = this.result.cgsh;
          for (let ele in cgshTemp) {
            cgshTemp[ele] = cgshTemp[ele].replace(/,/g, '<br>')
          }
          this.cgsh = cgshTemp;
          // 命宫
          this.minggong = this.result.minggong;
          // 胎元
          this.taiyuan = this.result.taiyuan;
          // 胎息
          this.taixi = this.result.taixi;
          // 五行
          let wxTemp = [
            this.result.wx.tyearwx + this.result.wx.zyearwx,
            this.result.wx.tmonthwx + this.result.wx.zmonthwx,
            this.result.wx.tdaywx + this.result.wx.zdaywx,
            this.result.wx.thourwx + this.result.wx.zhourwx
          ];
          this.wx = wxTemp;
          // 性格分析
          this.xgfx = this.result.rglm.xgfx;
          // 爱情分析
          this.zonghe = this.result.zonghe
          this.aqfx = this.result.rglm.aqfx;
          this.aqnum = this.result.zonghe.th;
          // 事业分析
          this.syfx = this.result.rglm.syfx;
          this.syfxPlus = this.result.tywh.hyhw;
          // 健康分析
          let obj = {};
          // 健康综述
          obj.des = this.result.rglm.jkfx;
          // 易患疾病
          obj.jb = this.result.whjk.jb;
          // 易发症状
          obj.zz = this.result.whjk.zz;
          // 五行属性
          obj.wh = this.result.whjk.wh;
          // 养生要点
          obj.yd = this.result.whjk.yd;
          // 生活起居
          obj.sh = this.result.whjk.sh;
          // 饮食调养
          obj.ys = this.result.whjk.ys;
          // 保健膳食
          obj.bj = this.result.whjk.bj;
          this.jkfx = obj;
          // 财运分析
          this.cyfx = this.result.rglm.cyfx;
          // 三命通会
          this.smth = this.result.sxth.tf1;
          this.smthPlus = this.result.sxth.tf2;
          // 未来一年
          this.wlyn = this.result.myqtext;
          uni.hideLoading();
          this.hasResult = true;
        }else{
        	uni.showToast({
        		title: '订单编号不存在',
        		icon: 'none'
        	});
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
.pick-header {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.pick-item {
  color: #595757;
	width: 33%;
	font-size: 32rpx;
	line-height: 64rpx;
  text-align: center;
  font-weight: bold;
}
.pick-active {
  border-bottom: 6rpx solid #c45e04;
}
.content {
  box-sizing: border-box;
  width: 100%;
  padding: 0 20rpx 90rpx 20rpx;
  font-size: 30rpx;
  line-height: 52rpx;
  .page-header {
    .page-header-img {
      width: 100%;
    }
  }
}
.userinfo-box {
  border: 2rpx solid #d3c88c;
  background-color: #fffcf4;
  border-radius: 30rpx;
  padding: 20rpx;
  .user-bazi, .user-des {
    margin-top: 20rpx;
  }
}
.ganzhi-table {
  .ganzhi-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    .ganzhi-total-title, .ganzhi-total-content {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: #fae1cb;
      border: 2rpx solid #ac7b29;
      height: 80rpx;
      font-weight: bold;
    }
    .ganzhi-title, .ganzhi-content, .ganzhi-content-merge {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: #fefdf9;
      border: 2rpx solid #ac7b29;
      height: 80rpx;
    }
    .ganzhi-total-title, .ganzhi-title {
      font-weight: bold;
    }
    .first-col {
      width: 140rpx;
      background: #fae1cb;
      font-weight: bold;
    }
		.cgsh-item {
			font-size: 32rpx;
			line-height: 36rpx;
			height: 110rpx;
		}
    .ganzhi-total-content, .ganzhi-content{
      flex: 1;
    }
    .ganzhi-content-merge {
      flex: 4;
    }
  }
	.cgsh-item {
		font-size: 32rpx;
  	line-height: 32rpx;
		height: fit-content;
	}
}
.bazi-info {
  .bazi-info-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40rpx 0 20rpx;
    background: url('@/static/images/synthesis/result/pic6.png') repeat-x 0 bottom;
    .bazi-img-title {
      width: 282rpx;
    }
  }
  .bazi-info-content {
    .bazi-info-section-title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0;
      .bazi-section-img-title {
        height: 70rpx;
      }
    }
    .bazi-tips {
      border: 1px solid #d3c88c;
      background-color: #fffcf4;
      border-radius: 30rpx;
      padding: 20rpx;
      margin: 0 0 20rpx 0;
    }
  }
  .bazi-des-box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 80rpx;
    .bazi-des-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .bazi-des-title-img {
        height: 72rpx;
        position: absolute;
        top: -36rpx;
      }
    }
    .bazi-des-content {
			text-indent: 1em;
      box-sizing: border-box;
      width: 100%;
      border: 1px solid #d3c88c;
      background-color: #fffcf4;
      border-radius: 30rpx;
      padding: 50rpx 20rpx 20rpx;
    }
  }
}
.ad-img {
	width: 100%;
	margin-top: 40rpx;
}
.bottom-ad {
	position: fixed;
	bottom: 20rpx;
}
.master-hit-box {
	width: 80%;
	margin:auto;
	box-sizing: border-box;
	position: relative;
	.master-hit-close {
		position: absolute;
    right: 0;
    top: 0;
    width: 80rpx;
    height: 80rpx;
		text-align: center;
    font-weight: 700;
    font-size: 36rpx;
    line-height: 72rpx;
    color: #666;
    cursor: pointer;
    z-index: 50;
	}
	.master-hit-img {
		width: 100%;
		z-index: 49;
	}
  .master-wxcode {
    width: 100%;
    height: 40%;
    position: absolute;
    z-index: 50;
    bottom: 500rpx;
    text-align: center;
    .master-wxcode-box {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      .master-wxcode-img-box {
        position: absolute;
        height: 100%;
      }
      .master-wxcode-img {
        position: absolute;
        height: 65%;
        bottom: 13%;
      }            
    }
  }
  .master-tips-box {
    width: 100%;
    position: absolute;
    z-index: 50;
    bottom: 240rpx;
    text-align: center;
    .master-tips {
      width: 45%;
    }
  }
  .master-tips2-box {
    width: 100%;
    position: absolute;
    z-index: 50;
    bottom: 80rpx;
    text-align: center;
    .master-tips2 {
      width: 80%;
    }
  }
}
.login-hit-box {
  width: 80%;
  margin: auto;
  box-sizing: border-box;
  position: relative;
}
.login-hit-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 80rpx;
  height: 80rpx;
  cursor: pointer;
  z-index: 99;
}
.login-hit-img {
  width: 100%;
  margin-bottom: 56rpx;
}
.login-hit-btn {
  display: block;
  margin-bottom: 26rpx;
  width: fit-content;
}
.login-hit-btn-img {
  width: 100%;
  display: block;
}
</style>